<template>
  <dao title="忘记密码" color="#000" />

  <view
    style="padding: 20px 40px; display: flex; justify-content: space-between"
  >
    <text :class="{ bian: kong == '1' }">1.验证手机号码</text>
    <text>2.设置新密码</text>
  </view>
  <view style="margin-top: 50px; padding: 0 20px">
    <view style="margin-top: 10px">
      <uni-forms
        :border="true"
        ref="valiForm"
        :rules="data.rules"
        :modelValue="data.valiFormData"
      >
        <uni-forms-item name="name">
          <uni-easyinput
            :inputBorder="false"
            v-model="data.valiFormData.name"
            placeholder="请输入手机号"
          />
        </uni-forms-item>
        <uni-forms-item name="age">
          <uni-easyinput
            :inputBorder="false"
            :clearable="false"
            v-model="data.valiFormData.age"
            placeholder="请输入验证码"
          >
            <template #right>
              <view style="color: #93b4da">获取验证码</view>
            </template>
          </uni-easyinput>
        </uni-forms-item>
      </uni-forms>
    </view>
    <button class="brn" @click="submit">下一步</button>
    <div class="wang">
      <!-- <text @click="tui">账号密码登录</text> -->
    </div>
  </view>
</template>

<script lang="ts" setup>
import dao from "../../conpments/daohang.vue";
let kong = ref("1");
import {
  onMounted,
  ref,
  reactive,
  onBeforeUnmount,
  getCurrentInstance,
} from "vue";
const data = reactive({
  // 校验表单数据

  valiFormData: {
    name: "",
    age: "",
    introduction: "",
  },
  rules: {
    name: {
      rules: [
        {
          required: true,
          errorMessage: "手机号不能为空",
        },
        {
          pattern: /^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/,
          errorMessage: "手机号格式有误！",
        },
      ],
    },
    age: {
      rules: [
        {
          required: true,
          errorMessage: "验证码不能为空",
        },
      ],
    },
  },
});
const tui = () => {
  uni.navigateBack({
    delta: 1,
  });
};
const valiForm = ref<HTMLFormElement | null>(null);
const submit = () => {
  valiForm
    .value!.validate()
    .then((res: any) => {
      console.log("success", res);
      uni.showToast({
        title: `校验通过`,
      });
      uni.navigateTo({
        url: "/pages/my/Reset/index",
      });
    })
    .catch((err: any) => {
      console.log("err", err);
    });
};
</script>

<style lang="scss" scoped>
.bian {
  color: #3280fe;
}
::v-deep .is-input-border {
  border: 0 !important;
}
::v-deep .brn {
  margin-top: 20rpx;
  width: 100%;
  border-radius: 50rpx;
  color: #fff;
  background-image: linear-gradient(to right, #53c4ff, #40a3ff, #3383fe);
}
::v-deep .uni-forms-item .is-required {
  display: none;
}
.wang {
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between;
  width: 100%;

  font-size: 28rpx;
  color: #b4b3b3;
}
</style>
